<template>
    <div>
        <el-upload               
                :auto-upload="false"
                :on-change="firstHandleChange"
                class="avatar-uploader"
                name="img"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-remove="RemoveImage">
        </el-upload>
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template> 
<script>
// 工具栏配置
// import { uploadPic } from "../../api/api";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"] // remove formatting button
];
import { quillEditor } from "vue-quill-editor";
export default {
  props: ["initInfo"],
  data() {
    return {
      LogoImage:"",
      content: null,
      editorOption: {
        placeholder: "请输入商品描述",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function(value) {
                if (value) {
                   document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }
    };
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    firstHandleChange: function(file, fileList) {
      const isLt20K = file.size / 1024 / 1000 < 0.5;
      if (!isLt20K) {
        this.$message.error("上传banner图片大小不能超过 500KB!");
        fileList.pop();
      } else {
        var self = this;
        console.log('上传的图片=====》',file);
        console.log('上传的图片=====》',fileList[0]);
        let formData = new FormData();
        formData.append('file',fileList[0].raw);
        formData.append('name', "file");
        formData.append('filename', "2.jpg");
        formData.append('Content-Type', "image/jpg");
        formData.append('Content-Disposition', "form-data");
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data;boundary = '
          }
        }
          axios.post('http://www.bestckd.com/lungtest/api/remote/upload', formData, config).then(function (res) {
            if(res.data.IsSuccess){
              let imgSrcHead="http://www.bestckd.com/lungtest/remotewardrounds/";
              let uploadImageUrl=res.data.Result;
              let imageUrl=imgSrcHead+uploadImageUrl;
              console.log(imageUrl);
              let quill=self.$refs.myQuillEditor.quill;;
              let length= quill.getSelection().index;
              quill.insertEmbed(length, 'image', imageUrl);
            }
          
        })
      }
    },
  },
  watch: {
    content: function(newVal, oldVal) {
      console.log("页面输入的内容=========>", newVal);
      this.$emit("contentChange", { ProductDetail: newVal });
    },
    initInfo: function(newVal, oldVal) {
      this.content = newVal;
    }
  }
};
</script>   